<template>
	<view class="login">
		<view class="title">欢迎登录</view>
		<div class="label">
			<text>用户名</text><input type="text" class="input" v-model="loginForm.userName" placeholder="请填写用户名" />
		</div>
		<div class="label">
			<text>密码</text><input type="password" class="input" v-model="loginForm.password" placeholder="请填写密码" />
		</div>
		<view class="nav-register">
			<navigator url="/pages/register/register">
				没有账号?前往注册
			</navigator>
		</view>
		<view class="agreement">
			<radio value="agree" :checked="isAgree" @click="onCheckChange" color="#07c25f" style="transform:scale(0.8)">
			</radio>
			<text>我已阅读并同意
				<text class="protocol" @click.stop="onShowProtocol()">《用户协议》</text>
				和
				<text class="protocol" @click.stop="onShowPrivacy()">《隐私政策》</text>
			</text>
		</view>
		<button :class='isAgree?"btn-agree":"btn"' @click="submit">同意并继续</button>
		<!-- <uni-forms class="form" :modelValue="loginForm" :rules="rules" validate-trigger="bind">
			<uni-forms-item name="userName" class="label">
				<uni-easyinput type="text" v-model="loginForm.userName" prefix-icon="person" placeholder="请填写用户名" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput type="password" v-model="loginForm.password" prefix-icon="locked" placeholder="请填写密码" />
			</uni-forms-item>
			<view>
				<checkbox-group @change="onCheckChange">
					<checkbox value="agree" :checked="isAgree">
						<text>我已阅读并同意
							<text class="protocol" @click.stop="onShowProtocol()">《用户协议》</text>
							和
							<text class="protocol" @click.stop="onShowPrivacy()">《隐私政策》</text>
						</text>
					</checkbox>
				</checkbox-group>
			</view>
			<button class="btn-submit" @click="submit" type="primary">登录</button>
		</uni-forms> -->
		<!-- #ifdef APP-PLUS -->
		<policy></policy>
		<!-- #endif -->
	</view>
</template>

<script>
	import UNI_APP from '@/.env.js';
	export default {
		data() {
			return {
				isAgree: false,
				loginForm: {
					terminal: 1, // APP终端
					userName: '',
					password: ''
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请填写用户名',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}]
					}
				}
			}
		},
		methods: {
			submit() {
				if (!this.isAgree) {
					uni.showToast({
						title: "请勾选同意用户协议",
						icon: "none"
					})
					return;
				}
				this.$http({
					url: '/login',
					data: this.loginForm,
					method: 'POST',
					headers: {
						'content-type': 'application/x-www-form-urlencoded'
					}
				}).then(loginInfo => {
					console.log("登录成功,自动跳转到聊天页面...")
					uni.setStorageSync("userName", this.loginForm.userName);
					uni.setStorageSync("password", this.loginForm.password);
					uni.setStorageSync("isAgree", this.isAgree);
					uni.setStorageSync("loginInfo", loginInfo);
					// 调用App.vue的初始化方法
					getApp().$vm.init()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/chat/chat"
					})
				}).catch((e) => {
					console.log("登录失败：", e);
				})
			},
			onShowProtocol() {
				const linkUrl = encodeURIComponent(UNI_APP.PROTOCOL_URL);
				uni.navigateTo({
					url: '/pages/common/external-link?url=' + linkUrl
				});
			},
			onShowPrivacy() {
				const linkUrl = encodeURIComponent(UNI_APP.PRIVACY_URL);
				uni.navigateTo({
					url: '/pages/common/external-link?url=' + linkUrl
				});
			},
			onCheckChange(e) {
				this.isAgree = true
			}
		},

		onLoad() {
			this.loginForm.userName = uni.getStorageSync("userName");
			this.loginForm.password = uni.getStorageSync("password");
			// this.isAgree = !!uni.getStorageSync("isAgree");
		}
	}
</script>

<style lang="scss">
	.login {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 60rpx;

		.title {
			padding-top: 250rpx;
			padding-bottom: 50rpx;
			// color: $im-color-primary;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
		}

		.label {
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			align-items: center;
			border-bottom: 3rpx #f2f2f2 solid;

			input {
				width: 70%;

				.uni-input-placeholder {
					color: #b5b5b5;
				}
			}
		}

		>.label:nth-of-type(1) {
			margin-top: 100rpx;
			border-top: 3rpx #f2f2f2 solid;
		}


		.uni-forms {
			padding: 50rpx;
			flex: 1;

			.protocol {
				color: #007BFF;
			}

			.btn-submit {
				margin-top: 80rpx;
				border-radius: 50rpx;
			}
		}

		.nav-register {
			width: 210rpx;
			// color: $im-color-primary;
			color: #5b6e96;
			// font-size: $im-font-size-large;
			font-size: 24rpx;
			align-self: flex-end;
			margin: 20rpx 0rpx 100rpx 0;
		}

		.agreement {
			width: 80%;
			margin: 0 auto;
			text-align: center;
			color: #b6b6b6;

			radio {
				transform: scale(0.8)
			}

			.protocol {
				color: #5b6e96;
			}
		}

		.btn {
			margin-top: 50rpx;
			width: 300rpx;
			color: #d0d0d0;
		}

		.btn-agree {
			width: 300rpx;
			margin-top: 50rpx;
			color: #fff;
			background-color: #07bd5f;
		}
	}
</style>